<template>
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#2c2c2c"
    inactive-color="#cdcdcd"
  >
    <van-tabbar-item icon="wap-home-o" @click="toHomeView">
      <router-link to="./home">首页</router-link></van-tabbar-item
    >
    <van-tabbar-item icon="column" @click="toHandNote">
      <router-link to="./handnote">手记</router-link></van-tabbar-item
    >
    <van-tabbar-item icon="search" @click="toSearch"
      ><router-link to="./search">发现</router-link></van-tabbar-item
    >
    <van-tabbar-item icon="friends-o" @click="toMy">
      <router-link to="./my">我的</router-link></van-tabbar-item
    >
  </van-tabbar>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    onChange(active) {
      this.active = active;
    },
    toHomeView(){
      this.$router.push("/");
    },
    toHandNote(){
      this.$router.push("/handnote");
    },
    toSearch(){
      this.$router.push("/search");
    },
    toMy(){
      this.$router.push("/my");
    },
  },
};
</script>
<style lang="scss">
  body{
    background-color: #f4f4f4;
  }
.van-tabbar--fixed{
  height: 15.2222vw;
  .van-tabbar--fixed{
    height: 72px;
  width: 150px;
 
  }
  .van-tabbar-item__icon{
    font-size: 40px;
  }
}
.van-toast{
  width: 25.2319vw;
  height: 25.2319vw;
}

</style>
